<template>
<view class="category">
<!-- #ifndef MP-WEIXIN -->
	<view class="top" :style="{paddingTop: StatusBar + 'px'}">
		<search-pro @search="search"></search-pro>	
		<view class="tabs shadow"><cu-tabs :list="list" :act="act" @change="tabChange"></cu-tabs></view>
	</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
     <view class="top">
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">分类</block>
		</cu-custom>	
		<search-pro @search="search"></search-pro>	
		<view class="tabs shadow"><cu-tabs :list="list" :act="act" @change="tabChange"></cu-tabs></view>		 
	 </view>
<!-- #endif -->
	<view class="main">
		<view class="left">
			<scroll-view scroll-y>
				<view @tap="sonChange(index, item.id)" :class="['item', { act: index === sonTab }]" v-for="(item, index) in sonList.son" :key="index">{{ item.name }}</view>
			</scroll-view>
		</view>
		<view class="right">
			<scroll-view scroll-y enable-back-to-top @scrolltolower="MoreData">
				<block v-if="proList.length && loaded">
					<view @tap="getURL(item)" class="item" v-for="(item, index) in proList" :key="index">
						<view><image lazy-load :src="item.default_imgurl" @error="ImageError(index)"></image></view>
						<view>
							<view class="title">{{ item.name }}</view>
							<view class="text-red text-bold text-price text-df">{{ item.now_price }}</view>
						</view>
					</view>					
				</block>
				<block v-if="loaded && !proList.length">
					<empty-data>不小心迷路了~</empty-data>
				</block>
			</scroll-view>
		</view>
	</view>
</view>
</template>

<script>
	import SearchPro from '@/components/search'
	import { Group, groupProduct } from '@/common/api'
	import { shopIndex, shopDetail } from '@/common/api/shop'
	import { mapGetters } from 'vuex'
	import { requestURL } from '@/common/utils/config'
	export default {
		name: 'category',
		components: { SearchPro },
		data() {
			return {
				StatusBar: this.StatusBar,
				count: 0,
				currentTab: 0,
				act: '1',
				times: '',
				list: [],
				proList: [],
				sonTab: 0,
				loaded: false,
				onParams: {
					type_ids: '',
					id: ''
				},
				id: '',
				params: {
					type_all: 1,
					pages: 1,
					type_id: ''
				}
			};
		},
		computed: {
			...mapGetters([
				'shop',
				'userCity'
			]),
			sonList () {
				return !this.list.length ? [] : this.list[+this.act - 1]
			}
		},
		created() {
			if (this.shop.type === 5) {
				this.getGroup()
			} else {
				this.getOnline()
			}
		},
		methods: {
			ImageError (idx) {
				this.proList[idx].default_imgurl = '/static/error.png'
			},
			getURL (item) {
				if (this.shop.type === 5) {
					uni.navigateTo({
						url: `/pages/orders/productinfo?pid=${item.id}`
					})
				} else if (this.shop.type === 1) {
					uni.navigateTo({
						url: `/pages/orders/productinfo?supply_id=${item.supply_id}&pid=${item.id}`
					})
				}
			},			
			MoreData () {
				if (this.loaded) {
					if (this.shop.type === 5) {
						this.params.pages++
						this.getList()						
					}
				}
			},
			getOnline () {
				const params = {
					add_c: '东莞市',
					latitude: '23.02067',
					longitude: '113.75179'
				}
				// params = { this.userCity.city, ...this.userCity.location }
				shopIndex(params).then(res => {
					this.list = res.recommend.map((item, act) => {
						let o = {}
						o.act = act
						o.id = item.id
						o.name = item.shop_name
						o.son = []
						return o
					})
					this.onParams.id = this.sonList.id
					this.getOnlineList()
				})
			},
			getGroup () {
				Group().then(res => {
					this.list = res.data.map((item, index) => {
						item.act = index
						item.son.unshift({ id: item.id, name: '全部' })
						return item
					})
					this.params.customer_id = this.shop.customer_id
					this.params.type_id = this.sonList.id
					this.getList()
				})
			},
			getList () {
				uni.showLoading()
				groupProduct(this.params).then(res => {
					uni.hideLoading()
					this.loaded = true
					if (res.data.length) {
					  this.proList = [...this.proList, ...res.data]						
					} else {
						if (this.params.pages !== 1) uni.showToast({ icon: 'none', title: '没有更多了>_<' })
					}
				})
			},
			getOnlineList (id) {
				uni.showLoading()
				shopDetail(this.onParams).then(res => {
					uni.hideLoading()
					this.loaded = true
					if (res.shop_list.length) {
						const type = res.product_type
						this.list.son = []
						this.list.filter(item => item.id === res.recommend.id)[this.currentTab].son = type
						this.list[+this.act - 1].son.unshift({id: '', name: '全部'})						
						let data = res.shop_list.map(item => {
							let m = {}
							m.default_imgurl = requestURL + item.default_imgurl
							m.name = item.name
							m.now_price = item.now_price
							m.supply_id = item.supply_id
							m.id = item.id
							return m
						})
						this.proList = [...this.proList, ...data]
					} else {
						if (this.params.pages !== 1) uni.showToast({ icon: 'none', title: '没有更多了>_<' })
					}
				})
			},
			tabChange (item) {
				this.loaded = false			
				this.proList = []
				this.params.pages = 1
				this.act = (item.act + 1).toString()
				this.sonTab = 0				
				if (this.shop.type === 5) {
					this.params.type_id = item.id						
					this.getList()					
				} else if (this.shop.type === 1) {
					this.onParams.type_ids = ''
					this.onParams.id = item.id					
					this.getOnlineList()
				}
			},
			sonChange (idx, id) {
				this.loaded = false
				this.sonTab = idx
				this.proList = []
				this.params.pages = 1
				if (this.shop.type === 5) {
				    this.params.type_id = id
					this.getList()
				} else if (this.shop.type === 1) {
					this.onParams.type_ids = id
					this.getOnlineList()
				}
			},
			search (key) {
				uni.navigateTo({
					url: '/pages/search/productlist?keyword='+key
				})
			}
		}
	}
</script>

<style lang="less">
@import '../../../common/styles/variables.less';
.fixedBody;
.category {
	height:100%;
	overflow:hidden;
	display:flex;
	flex-direction: column;
	flex-flow: column;
	.top {
		background-color: white;
		.tabs {
			.border-bottom;
			margin-bottom: 2upx
		}		
	}
	.main {
		flex: 1;
		display: flex;
		background-color:white;
		overflow: hidden;
		& > view {
			scroll-view {
				height: 100%;
			}
			&.left {
				width: 180upx;
				background-color:#f7f7f7;
				.twoLine(1);
				.border-right;
				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 70upx;
					font-size:@minSize;
					&.act {
						color:@red;
						background-color:white;
						.border-bottom;
					}
				}
			}
			&.right {
				flex: 1;
				.item {
					height: 180upx;
					display: flex;
					align-items: center;
					.border-bottom;
					padding: 0 15upx;
					& > view {
						height: 100%;
						&:first-of-type {
							margin-right: 15upx;
							display: flex;
							align-items: center;
							& > image {
								width: 140upx;
								height: 140upx;									
							}
						}
						&:last-of-type {
							flex: 1;
							padding: 15upx 0;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							flex-flow: column;
							justify-content: space-between;
							& > view {
								&.title {
									font-size: @minSize;
									.twoLine(2);
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
